<template>
  <div class="container">
    <a-card style="height:calc(100vh - 105px)">
      <div style="display: flex;justify-content: space-between;">
        <a-row style="min-height: 0.9rem; font-size: 0.4rem; margin-bottom: 15px">
          <a-col :span="0">
            <a-icon type="search"></a-icon>
          </a-col>
          <a-col :span="24">
            <a-input-search placeholder="搜索" enter-button v-model:value="searchName" @search="onSearch" />
          </a-col>
        </a-row>
      </div>
      <a-table bordered :columns="columns" :data-source="data" :pagination="false">
        <template #bodyCell="{ column, text, record }">
          <template v-if="text === 'log_in'">
            <span>登录</span>
          </template>
          <template v-if="text === 'create'">
            <span>添加</span>
          </template>
          <template v-if="text === 'update'">
            <span>修改</span>
          </template>
          <template v-if="text === 'delete'">
            <span>删除</span>
          </template>
        </template>
      </a-table>
      <div style="position: absolute;bottom: 25px;right: 25px;">
        <a-pagination v-model:current="current" @change="handlePagination" :total="pageTotal" :hideOnSinglePage="true"
          style="float: right;" />
        <span v-if="pageTotal > 10"
          style="float: right;font-size: 16px;line-height: 32px;margin-right: 25px;color: rgb(65, 65, 65);">共{{
            pageTotal }}条数据</span>
      </div>
    </a-card>

  </div>
</template>
  
<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { dataLogList } from '@api/record.js'
let loading = ref(false)
const router = useRouter();
const route = useRoute();
const searchName = ref('')
const pageTotal = ref()
const current = ref(1)
const pagesize = ref(10)
function handlePagination(page, pageSize) {
  console.log(page, pageSize)
  current.value = page
  pagesize.value = pageSize
  loading.value = true
  getlogList()
  loading.value = false
}
const columns = [
  {
    title: "序号",
    width: '80px',
    align: 'center',
    dataIndex: "index",
  },
  {
    title: "用户",
    dataIndex: "display_user",
  },
  {
    title: "IP",
    dataIndex: "ip",
  },
  {
    title: "时间",
    dataIndex: "action_time",
  },
  {
    title: "操作",
    dataIndex: "action",
  },
  {
    title: "内容",
    dataIndex: "message",
  },
];
function onSearch() {
  getlogList()
}
const data = ref([]);
function getlogList() {
  loading.value = true
  data.value = []
  dataLogList({ page: current.value, limit: pagesize.value, search: searchName.value }).then(res => {
    pageTotal.value = res.data.count
    res.data.results.forEach((v, i) => {
      console.log(v)
      data.value.push({
        key: v.id,
        index: (current.value - 1) * pagesize.value + i + 1,
        display_user: v.display_user,
        ip: v.ip,
        action_time: v.action_time,
        action: v.action,
        message: v.message,
      })
    })
  })
  loading.value = false
}
onMounted(() => {
  getlogList()
})
</script>
  
<style lang="less" scoped>
.container {
  padding: 20px;
  height: calc(100vh - 65px);
}

.action_btn {
  margin-right: 15px;
}

.action_group {
  display: flex;
  right: 30px;
}

::v-deep .ant-table {
  height: calc(100vh - 250px);
  overflow: auto;
}
</style>
  